<template>
    <div>
        <div class="bottom-cpn">
            <ul>
                <li v-for="item in list" :key="item.id">
                    {{ item.name }}
                </li>
            </ul>
            <p>Copyright © 2022 蛙蛙在线工具 版权所有 <span>粤ICP备18006158号</span></p>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            list:[
                {
                    id: 1,
                    name: "关于"
                },
                {
                    id: 2,
                    name: "反馈"
                },
                {
                    id: 3,
                    name: "赞赏"
                },
                {
                    id: 4,
                    name: "小程序"
                },
                {
                    id: 5,
                    name: "文章"
                },
                {
                    id: 6,
                    name: "会员"
                }
            ]
        }
    }
}
</script>

<style scoped>
.bottom-cpn{
    width: 1000px;
    border-top: 1px solid gainsboro;
    margin: auto;
}
ul{
    width: 305px;
    display: flex;
    list-style: none;
    margin: auto;
    margin-top: 5px;
}
li{
    padding: 0 8px;
    line-height: 36px;
    font-size: 14px;
}
li:hover{
    color: #4caf50;
    cursor: pointer;
}
p{
    font-size: 14px;
    color: #888;
}
span{
    color: black;
}
span:hover{
    color: #4caf50;
    cursor: pointer;
}
</style>